<template>
  <div class="gateway-search">
    <el-tabs type="border-card" v-model="agreement" @tab-click="click">
      <el-tab-pane label="所有设备" name="all"></el-tab-pane>
      <el-tab-pane label="LoRaWAN" name="LoRaWAN"></el-tab-pane>
      <el-tab-pane label="LoRaPP" name="LoRaPP"></el-tab-pane>
    </el-tabs>

    <div class="search-form">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="在线状态">
          <el-select v-model="form.online" style="width: 215px">
            <el-option label="在线" value="true"></el-option>
            <el-option label="离线" value="false"></el-option>
            <el-option label="全部" value="all"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="EUI">
          <el-input v-model="form.eui" style="width: 215px"></el-input>
        </el-form-item>

        <el-form-item label="绑定时间" class="time">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="开始时间"
              v-model="form.date1"
              style="width: 150px"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">至</el-col>
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="结束时间"
              v-model="form.date2"
              style="width: 150px"
            ></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="mini" @click="tosearch">搜索</el-button>
      <el-button type="primary" size="mini" @click="clear">清除条件</el-button>
      <el-button type="primary" size="mini" @click="refresh">刷新</el-button>
      <span class="ml-10 f14 f999">搜索结果：{{ total }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      agreement: "all",

      form: {
        online: "all",
        eui: "",
        date1: "",
        date2: "",
      },
    };
  },
  props: ["total"],
  methods: {
    // 切换协议触发
    click() {
      // console.log(this.agreement);
      this.$emit("turn", this.agreement);
      this.clear();
    },

    onSubmit() {
      console.log("submit!");
    },
    // 处理时间，传表单数据
    tosearch() {
      let date = this.formatDate();
      // console.log(date);
      this.$emit("search", this.form, date);
    },
    clear() {
      let date = "";
      // console.log(date);
      this.form.eui = "";
      this.form.online = "all";
      this.form.date1 = "";
      this.form.date2 = "";
      this.$emit("search", this.form, date);
    },
    refresh() {
      // 刷新页面，感觉这个作用不大
      location.reload();
    },
    // 格式化参数
    formatDate() {
      let date = "";
      if (this.form.date1 && this.form.date2) {
        date =
          new Date(this.form.date1).getTime() +
          "-" +
          new Date(this.form.date2).getTime();
      } else if (this.form.date1) {
        date = new Date(this.form.date1).getTime() + "-" + new Date().getTime();
      }
      return date;
    },
  },
};
</script>

<style lang="less">
// 大盒子
.gateway-search {
  position: relative;
  margin-top: 10px;
  .el-button {
    margin: 0 1px 0 0;
  }
  .f999 {
    color: #7c7c7c;
  }
  // 白色背景的高度
  .el-tabs--border-card {
    height: 230px;
  }
}
// 内部的表格
.search-form {
  position: absolute;
  top: 50px;
  left: 20px;
  // 表单高度，调间距
  .el-form-item {
    height: 24px;
    width: 454px;
  }
  // 输入框高度
  .el-input__inner {
    height: 34px;
  }
  // 绑定时间
  .time {
    .el-col-11 {
      min-width: 120px;
    }
  }
}
</style>